<template>
  <uni-nav-bar title="安蓝卡车后市场服务平台" color="#333" :border="false" statusBar></uni-nav-bar>
  <environment></environment>
  <view class="package column" style="background:#DBEEFF;color:#1B91FF;justify-content: space-between;height: 300rpx;" v-if="orderAll">
    <view style="font-size: 40rpx;">充值成功</view>
    <view>您为{{ orderAll.driver_name }}充值¥{{ orderAll.total_amount }}已到好友安蓝钱包</view>
    <view>平台奖励¥{{ orderAll.from_price }}已加到您安蓝钱包</view>
    <view class="center" style="justify-content: space-around;width: 100%;">
      <text @click="redirectTo('index/filling')">进入首页</text>
      <text @click="redirectTo('account/detailed?type=1')">查看订单</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { redirectTo } from '@/utils/navigator';
import { ref } from 'vue';
import environment from '@c/pobulic/environment.vue';
import { onLoad } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import { recharge_order } from '@/gql/account';
import { getDriverID } from '@/stores/driverID';
const driver_id = getDriverID();
const orderID = ref();
const orderAll = ref({});
onLoad((pearm) => {
  orderID.value = pearm.id;
  init();
});
function init() {
  const payload = {
    query: recharge_order,
    variables: { order_id: Number(orderID.value), driver_id },
  };
  toPublish('ql/driver/getRechargeImage', payload, (obj: { data: any }) => {
    const { data } = obj;
    orderAll.value = data.recharge_order;
  });
}
</script>

<style scoped lang="less">
.center {
  text {
    margin-top: 20rpx;
    padding: 10rpx 30rpx;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #1b91ff;
  }
}
</style>
